<template>
  <div class="container">
		<div class="tips-wrapper">
			<img class="tip-icon" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/close%402x.png" alt="">
			<span>肤质检测说明</span>
			<span class="tip-btn" @click="toProtocolDetail">点击查看</span>
		</div>
		<div class="sysBusyPrompt_btn" @click="init">刷新</div>
		<div class="list" v-show="skinData.length>0">
			<van-list v-model="loading"
					:finished="finished"
					:error.sync="error"
					:immediate-check="false"
					error-text="请求失败，点击重新加载"
					finished-text=""
					@load="getSkinData">
				<div class="item" v-for="(item, index) in skinData" :key="index">
					<div class="line1 line">
						<span class="time">测试时间：{{item.create_time}}</span>
						<span v-if="item.status == 0" class="status wait">等待结果报告</span>
						<span v-else-if="item.status == 1" class="status success">已完成</span>
						<span v-else-if="item.status == 2" class="status fail">检测失败</span>
					</div>
					<div class="line2 line" v-if="item.status == 1">
						<span>综合评分：{{item.avg_score}}</span>
						<span class="age">肤龄：{{item.age}}</span>
						<span class="age" v-if="item.beauty > 0">颜值：{{item.beauty}}</span>
					</div>
					<div class="line3 line">
						<img class="result-img" :src="item.image_url">
						<div class="fail-reason" v-if="item.status == 2">失败原因：{{item.failure_reason}}</div>
						<div class="btn-box" v-else-if="item.status == 1"  @click="toPageDetail(item.id)">点击查看结果</div>
					</div>
				</div>
			</van-list>
		</div>
		<div class="no-data"
         v-show="!skinData.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
import { skinLists } from '@/api/dz/aiDzApi'
import noData from '@/components/noData/index'
let p = 1
export default {
	components: {
		noData
	},
  data() {
    return {
			noData: {
        text: '暂无数据',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
        width: '214px',
        marginTop: '120px',
        txtMarginTop: '-30px'
      },
      skinData: [],
      loading: false,
      error: false,
      finished: false,
		};
  },
	created () {
		this.init()
	},
	mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.getSkinData()
    })
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data, 0);
    },
		toPageDetail(id) {
			this.Jump("aiDetail", { skin_id: id });
		},
		toProtocolDetail() {
			this.Jump("protocolDetail")
		},
		getSkinData() {
			if(this.finished) {
				return
			}
			this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
			skinLists({
				p: p,
			}).then(res => {
        this.$loadingWrap.close()
				if (res.status == 1) {
					let skinData = res.data
					if (skinData.length == 10) {
            p += 1
          } else {
            this.finished = true
          }
					this.skinData = this.skinData.concat(skinData)
				}	else {
          Toast(res.msg)
        }	
			}) 
		},
		init() {
			p = 1
			this.skinData = []
			this.finished = false
			this.loading = false
			this.getSkinData()
		},
  },
};
</script>
<style lang="scss">
.app-wrapper.h100 {
	background: #020B1E;
	padding: 0;
}
.container {
  width: 100vw;
	min-height: 100vh;
  background: #020b1e;
  padding: 24px;
  color: #fff;
  font-size: 28px;
	.sysBusyPrompt_btn {
		font-size: 28px;
		color: #f5f5f5;
		background: rgba(45,49,64,1);
		width: 90px;
		height: 90px;
		line-height: 88px;
		text-align: center;
		margin: 0 auto;
		border: 1px solid #fff;
		border-radius: 45px;
		position: fixed;
		bottom: 100px;
		left: 30px;
		z-index: 9;
	}
	.tips-wrapper {
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 30px 0;
		.tip-icon {
			width: 32px;
			height: 32px;
			margin-right: 16px;
		}
		.tip-btn {
			color: #0CA2E7;
			margin-left: 12px;
		}
	}
	.list {
		.item {
			width: 702px;
			// height: 248px;
			background: rgba(45,49,64,1);
			border-radius: 12px;
			margin-bottom: 24px;
			padding: 24px;
			box-sizing: border-box;
			.line {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&.line2, &.line3 {
					margin-top: 20px;
				}
				.time {
					font-size: 24px;
					color: #999;
				}
				.status {
					// position: absolute;
					// right: 0;
					font-size: 24px;
					&.wait {
						color: #1175dc;
					}
					&.success {
						color: #0DA52C;
					}
					&.fail {
						color: #FF4040;
					}
				}
				.age {
					margin-left: 100px;
				}
				.result-img {
					width: 152px;
					height: 152px;
					border-radius: 16px;
				}
				.btn-box {
					display: inline-block;
					position: absolute;
					bottom: 0;
					right: 0;
					width: 232px;
					height: 60px;
					border-radius: 30px;
					background: #0ca2e7;
					text-align: center;
					line-height: 60px;
				}
				.fail-reason {
					width: 350px;
					line-height: 40px;
					color: #f3f4f5;
				}
			}
		}
	}
}
</style>
